<template>
	<view>
		<!-- <uni-nav-bar left-icon="back" left-text="" right-text="" title='收藏'></uni-nav-bar> -->

		<view class="like">
			<view @click="togoodsinfo(item.id)" class="item" v-for="item in goodslist" :key='item.id'>
				<image :src="item.pic" mode=""></image>
				<view class="title">
					{{item.name}}
				</view>
				<view class="brandprice">
					<view class="price">
						￥: {{item.price}}元
					</view>
					<view class="brand">
						乐居
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mix from "@/mixins/index.js"
	export default {
		mixins: [mix],
		data() {
			return {
				goodslist: '',
			};
		},
		methods: {
			// 到商品详细页面
			togoodsinfo(id) {
				console.log(id);
				uni.navigateTo({
					url: `../../home/goodsinfo/goodsinfo?id=${id}`
				})
			},

		},
		onLoad() {
			this.goodslist = uni.getStorageSync("collectlist")
		}
	}
</script>

<style scoped lang="scss">
	//猜你喜欢
	.like {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 670rpx;
		margin: 40rpx auto;
		margin-top: 40rpx;
		box-sizing: border-box;

		.item {
			box-shadow: 0 4px 14px 0 rgba(122, 98, 75, .12);
			border-radius: 12rpx;
			overflow: hidden;
			background-color: #FFFFFF;
			width: 320rpx;
			box-sizing: border-box;
			height: 420rpx;
			margin-bottom: 40rpx;

			image {
				width: 320rpx;
				box-sizing: border-box;
				height: 240rpx;
			}

			.title {
				font-size: 26rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 20rpx;
			}

			.brandprice {
				margin-top: 40rpx;
				padding: 0 20rpx;
				display: flex;
				box-sizing: border-box;
				justify-content: space-between;
				font-size: 24rpx;
			}
		}
	}
</style>
